// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

/**
 * 
 * useCallback: 
 *  把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新
 * useMemo:
 *  把创建函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算 
 */

const Child = ({ data, handleClick }) => {
  console.log('Child render');
  return (
    <button onClick={handleClick}>{data.number}</button>
  )
}

const MemoChild = React.memo(Child);

function App() {
  console.log('App render');

  const [name, setName] = React.useState('tom');
  const [number, setNumber] = React.useState(0);

  const data = React.useMemo(() => ({ number }), [number]);

  const handleClick = React.useCallback(() => setNumber(number + 1), [number]);

  return (
    <div>
      <input type="text" value={name} onChange={event => setName(event.target.value)} />
      <MemoChild data={data} handleClick={handleClick} />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",